<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box { 
            width:200px; 
            height:200px; 
            background-color:pink}
    </style>
</head>
<body>
    <div style="width:1em; height:1em; font-size:20px; background:red;"></div>
    <ul class="list">
        <li>aaaaaaaaa</li>
        <li>aaaaaaaaa</li>
        <li>aaaaaaaaa</li>
        <li>aaaaaaaaa</li>
        <li>aaaaaaaaa</li>
    </ul>
    <button class="btn">btn</button>
    <div class="box">

    </div>
    <script src="libs/zepto/zepto.js"></script>
    <script src="libs/zepto/event.js"></script>
    <script src="libs/zepto/selector.js"></script>
    <script>
        var isShow = true;
        $('.btn').click(function () {
            console.log(isShow);
            isShow = !isShow;
            $('.box').toggle(isShow);
            // isShow = false;
        });
        $('.box').click(function (e) {
            // console.log('box');
            // $(".box").css({"background-color": "yellow"});

            $(".box").hide();
            
        })

        $('.list li').click(function () {
            console.log('.list li');
            $('.list li').css({"background-color": "white"});
            $(this).css({"background-color": "pink"});
        })

        $('li:first').css({"color": "red"});

        // $('.box').on('click', function () {
        //     console.log('click');     
        // })
    </script>
</body>
</html>